<script setup>
defineProps({
  enTitle: {
    type: String,
    default: 'Avenue mechanism',
  },
  zhTitle: {
    type: String,
    default: '大道机制',
  },
  url: {
    type: String,
    default:
      'https://img.js.design/assets/img/669fc7d0ffaa0738e4ae2a9b.png#e892a0992cfea3cd103bc639c58ef90d',
  },
})
</script>

<template>
  <view class="card">
    <view class="left">
      <view class="en-title">{{ enTitle }}</view>
      <view class="zh-title">{{ zhTitle }}</view>
    </view>
    <image class="image" :src="url" mode="aspectFill" />
  </view>
</template>

<style lang="scss" scoped>
.card {
  padding: 26rpx 36rpx 26rpx 68rpx;
  border-radius: 16rpx;
  background: #fff8f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left {
    view {
      color: #ea5506;
      font-weight: 400;
    }
    .en-title {
      font-size: 24rpx;
      margin-bottom: 10rpx;
    }
    .zh-title {
      font-size: 36rpx;
    }
  }
  .image {
    width: 200rpx;
    height: 200rpx;
  }
}
</style>
